<template>

	<view>

		<view style="position: fixed;top: 0;left: 0;width: 100%;height: 300rpx;z-index: 1;">
			<view style="background-color: #fc0;height: 200rpx;"></view>

			<view class="gui-bg-white gui-flex gui-row gui-nowrap gui-space-between gui-align-items-center gui-padding">
				<!-- 排序 -->

				<view class="graceSelectMenuItem" @tap="orderBySellNumber('1')">
					<text class="gui-block gui-text gui-text-center"
						:class="[orderIndex == 1 ? 'gui-color-red' : 'gui-primary-text']">离我最近</text>
				</view>
				<view class="graceSelectMenuItem" @tap="orderBySellNumber('2')">
					<text class="gui-block gui-text gui-text-center"
						:class="[orderIndex == 2 ? 'gui-color-red' : 'gui-primary-text']">平台最热</text>
				</view>
				<view class="graceSelectMenuItem" @tap="orderBySellNumber('3')">
					<text class="gui-block gui-text gui-text-center"
						:class="[orderIndex == 3 ? 'gui-color-red' : 'gui-primary-text']">价格最低</text>
				</view>

				<view class="graceSelectMenuItem" @tap="showScreening">
					<text class="gui-text gui-block gui-text-center gui-icons">筛选 &#xe686;</text>
				</view>
			</view>
		</view>

		<view>
			<view style="height: 300rpx;"></view>

			<view class="gui-bg-white  gui-padding">
				<view class="gui-list-items" @click="shopInfo(item)" v-for="item in shops">
					<view class="gui-list-image gui-relative">
						<image class="gui-list-image" mode="aspectFill" :src="item.shop_dptp">
						</image>
						<view class="gui-badge-point"></view>
					</view>
					<view class="gui-list-body gui-border-b">
						<view class="gui-list-title">
							<text class="gui-list-title-text gui-primary-text">{{item.shop_name}}</text>

						</view>
						<text class="gui-list-body-desc gui-color-gray">{{item.shop_city+item.shop_address}}</text>
					</view>
					<text class="gui-list-arrow-right gui-icons gui-color-gray-light">&#xe601;</text>
				</view>


			</view>





			<!-- 右侧弹出筛选 -->
			<gui-popup ref="guipopupright" position="right" width="580rpx" :top="rightAraeTop" :zIndex="9999">
				<view class="gui-flex1 gui-flex gui-column right-area gui-relative ">
					<scroll-view class="gui-flex1 gui-bg-white gui-dark-bg-level-3 " :scroll-y="true">
						<view v-for="x in selectList">
							<view v-if="x.childen.length>0">
								<view style="margin-top:20rpx;" class="gui-padding-x">
									<text class="gui-h6 gui-color-gray">{{x.captory_name}}</text>
								</view>
								<view class="gui-bg-white gui-dark-bg gui-padding  gui-flex gui-row gui-wrap">
									<view
										:class="{'gui-bg-primary':z.captory_id == captoryId,'gui-color-white':z.captory_id == captoryId}"
										class="gui-border-radius gui-padding  gui-color-black gui-balck-border-color"
										style="margin-left: 5rpx; margin-bottom: 5rpx; padding: 10rpx"
										v-for="z in x.childen" @click="captoryId = z.captory_id">
										{{z.captory_name}}
									</view>

								</view>
							</view>

						</view>

						<view style="padding-left:25rpx; padding-right:25rpx;">
							<view class="gui-margin-top">
								<text class="gui-text gui-color-gray">价格区间</text>
							</view>
							<view style="margin-top:15rpx;" class="gui-flex gui-rows gui-nowrap gui-align-items-center">
								<input type="text" class="gui-form-input price-input gui-bg-gray gui-dark-bg-level-1"
									v-model="price1" />
								<text class="gui-block gui-color-gray" style="margin:20rpx;"> - </text>
								<input type="text" class="gui-form-input price-input gui-bg-gray gui-dark-bg-level-1"
									v-model="price2" />
							</view>
						</view>
					</scroll-view>
					<view class="right-area-ex gui-flex gui-row gui-nowrap gui-bg-white gui-dark-bg-level-1">
						<view
							style="width: 290rpx;height: 100rpx;line-height: 100rpx;font-size: 28rpx;text-align: center;"
							hover-class="gui-tap" @tap="screeningReset">
							<text
								style="width: 290rpx;height: 100rpx;line-height: 100rpx;font-size: 28rpx;text-align: center;"
								class="right-ex gui-block gui-color-gray">重置</text>
						</view>
						<view class="right-ex gui-bg-red"
							style="width: 290rpx;height: 100rpx;line-height: 100rpx;font-size: 28rpx;text-align: center;"
							hover-class="gui-tap" @tap="screeningSubmit">
							<text
								style="width: 290rpx;height: 100rpx;line-height: 100rpx;font-size: 28rpx;text-align: center;"
								class="right-ex gui-block gui-color-white">提交</text>
						</view>
					</view>
				</view>
			</gui-popup>
		</view>
	</view>
</template>
<script>
	import graceJS from '@/Grace6/js/grace.js';
	export default {
		data() {
			return {
				captoryId: '',
				// 第 1 排序选择
				selectMenu1: ['综合', '信用'],
				// 默认颜色
				defColor: '#2B2E3D',
				// 选中颜色
				activeColor: '#FF0036',
				// 排序索引
				orderIndex: 0,
				// 价格排序索引
				orderByIndex: 0,

				sizeSed: null,
				price1: 0,
				price2: 999,
				// 右侧弹出层 top 值
				rightAraeTop: 0,
				shops: [],
				selectList: []
			}
		},
		mounted() {
			this.initData();
		},
		onReady: function() {
			// 此处计算吸顶元素高度作为右侧弹出层的top值
			graceJS.select('#fixed-top-view', (res) => {
				this.rightAraeTop = res.height;
				// #ifdef H5
				this.rightAraeTop += 44;
				// #endif
			});
		},
		methods: {
			initData() {

				var self = this;
				var cityName = uni.getStorageSync("cityName");
				uni.gRequest.get('shop/list',{shop_city:cityName=="全国"?"":cityName}).then(result => {
					result.rows.forEach(x => {
						x.shop_dptp = uni.gRequest.server.replace('/app/', '') + x.shop_dptp;
					})

					self.shops = result.rows;
				});

			},
			shopInfo(x) {
				uni.navigateTo({
					url: '/pages/shop/details?id=' + x.shop_id
				})
			},
			// 第一个排序
			showMenu1: function() {
				this.show1 = true;
			},
			closeMenu1: function() {
				this.show1 = false;
			},
			select1: function(index, val) {
				// 获得选择项目后按照数据继续排序即可
				console.log("选择了 " + val);
				this.orderIndex = 0;
				this.orderByIndex = 0;
			},
			// 销量排序
			orderBySellNumber: function(index) {
				// 排序逻辑自己来实现

				this.orderIndex = index;
				this.orderByIndex = 0;
			},
			// 价格排序
			priceOrder: function(e) {
				console.log(e);
				// 1 2 为价格排序 0 为默认排序
				if (e != 0) {
					this.orderIndex = 2;
				}
				this.orderByIndex = e;
			},
			// 展示筛选界面
			showScreening: function() {
				var self = this;
				uni.gRequest.get("captory/data").then(x => {

					console.log('select:', x)
					self.selectList = x.data;
					self.$refs.guipopupright.open();
				})

			},
			// 选择尺寸
			sedSize: function(e) {
				this.sizeSed = e;
			},
			// 筛选提交
			screeningSubmit: function() {
				
				this.$refs.guipopupright.close();
				
				var self = this;
				
				uni.gRequest.get('shop/list', {
					captory_id: this.captoryId,
					max_price: this.price2,
					min_price: this.price1
				}).then(result => {
					result.rows.forEach(x => {
						x.shop_dptp = uni.gRequest.server.replace('/app/', '') + x.shop_dptp;
					})
					
					self.shops = result.rows;
					
				});



			},
			// 重置筛选
			screeningReset: function() {

				this.captoryId = '';
				this.price1 = 0;
				this.price2 = 999;
			},
			checkTag(z) {
				console.log(z)
				this.sizeSed = z
			}
		}
	}
</script>
<style scoped>
	.price-input {
		width: 120rpx;
		padding: 10rpx 0;
		border-radius: 5rpx;
		text-align: center;
	}

	.right-area-ex {
		width: 580rpx;
		height: 100rpx;
	}




	.gui-card-body {
		padding-bottom: 30rpx;
	}

	.gui-card-img-z {
		width: 150rpx;
		height: 150rpx;
		border-radius: 80rpx;
	}

	.gui-card-desc {
		width: 400rpx;
		margin-left: 25rpx;
		flex: 1;
	}

	.gui-card-name {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-right: 20rpx;
	}

	.gui-card-text {
		line-height: 40rpx;
		font-size: 24rpx;
	}

	.gui-card-footer {
		margin-top: 25rpx;
	}

	.gui-card-footer-item {
		width: 100rpx;
		text-align: center;
		flex: 1;
		line-height: 38rpx;
		font-size: 26rpx;
	}

	/* #ifndef APP-NVUE */
	.gui-card-footer-item {
		display: block;
	}

	.gui-box-shadow {
		box-shadow: 0px 0px 3rpx #999999;
	}

	/* #endif */
</style>